<template>
  <div v-if="_d.v1" class="t-select-wp">
  	<div class="select-box" :class="{show: _d.v2}" 
  		:style="{top: props.top+'px', left: props.left+'px', maxHeight: props.maxHeight}">
  		<div v-if="_d.list.length" class="list">
  			<div v-for="(item, index) in _d.list" :key="index" 
  				class="item"
  				:class="{active: item[props.fieldNames.value] == _d.value}"
  				@click="choiceItem(item)">{{item[props.fieldNames.label]}}</div>
  		</div>
  		<div v-else class="t-empty">暂无数据</div>
  	</div>
  </div>
</template>

<script setup>
	import { reactive, ref, onMounted } from 'vue'
	// import { Empty } from 'ant-design-vue';

	const props = defineProps({
		top: {
			type: Number,
			default: 0
		},
		left: {
			type: Number,
			default: 0
		},
		value: {
			type: Boolean,
			default: false
		},
		list: {
			type: Array,
			default: () => []
		},
		fieldNames: {
			type: Object,
			default: () => {}
		},
		// 改变方法
		change: {
			type: [null, Function],
			default: () => null
		},
		maxHeight: {
			type: String,
			default: '264px'
		},
	})

	const _d = reactive({
		v1: false,
		v2: false,

		value: props.value,
		list: props.list,

		// simpleImage: Empty.PRESENTED_IMAGE_SIMPLE
	})

	onMounted(() => {
		window.addEventListener('click', () => {
			hide();
		})
	})

	function show() {
		_d.v1 = true;
		setTimeout(() => {
			_d.v2 = true;
		}, 50);
	}

	function hide() {
		_d.v2 = false;
		setTimeout(() => {
			_d.v1 = false;
		}, 300);
	}

	// 改变
	function changeValue(value) {
		_d.value = value;
	}
	function changeList(list) {
		_d.list = list;
	}

	function choiceItem(item) {
		if(props.change) {
			props.change(item);
		}
	}

	defineExpose({
		show,
		changeValue,
		changeList
	})

</script>

<style lang="less" scoped>
.t-select-wp {
	position: absolute;
	z-index: 9999;
	top: 0;
	left: 0;
	right: 0;
	.select-box {
		position: absolute;
		z-index: 999;
		top: 100px;
		left: 100px;
		min-width: 200px;
		margin-top: 8px;
		box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
		background: #fff;
		min-height: 30px;
		border-radius: 2px;
		opacity: 0;
		transition: opacity .3s;
		overflow: auto;
		&.show {
			opacity: 1;
		}
		padding: 4px 0;
		.list {
			.item {
		    min-height: 32px;
		    padding: 5px 12px;
		    color: #000000d9;
		    font-weight: 400;
		    font-size: 14px;
		    line-height: 22px;
		    cursor: pointer;
		    &:hover {
		    	background: #F5F5F5;
		    }
		    &.active {
		    	background: #E6F7FF;
		    	font-weight: 600;
		    }
			}
		}
		.t-empty {
			margin: 10px 0 10px;
			color: #ccc;
			font-size: 12px;
			text-align: center;
		}
	}
}

</style>